<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!-- 菜单栏目-->
<epgdata:categoryItem var="menu_cat" size="4" code="${_templateParams['menu_cat']}" />
<!-- 历史与搜索 --> 
<epgdata:categoryItem var="historySearch_cat" size="2" code="${_templateParams['historySearch_cat']}" />
<c:set var="historyUrl" value="${historySearch_cat[0].url}" scope="application"/>
<c:set var="searchUrl" value="${historySearch_cat[1].url}" scope="application"/>
<!-- 绑定引导页面全局链接 -->
<epgdata:biz var="person_biz" code="${_templateParams['bind_biz']}"/>
<c:set value="${person_biz.url}" var="personUrl" scope="application"/>
<!-- 直播bizCode(全局变量) -->
<c:set value="${menu_cat[1].itemCode}" var="liveBizCode" scope="application"/>
<!-- 推荐栏目 -->
<epgdata:bizList var="bizes" code="${_templateParams['rec_biz']}"/>

<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<%@include file="/sites/weixin/js/common.jsp" %>
<%@include file="/sites/weixin/common/common_js.jsp" %>
<body onload="init()">
<div id="app">
	<!-- 上方菜单 -->
	<c:set var="menuIdx" value="0"/>
	<%@include file="topMenu.jsp" %>

	<!-- 大图轮播 -->
	<div id="swiper1" class="swiper-container" style="margin-top:3.5em;cursor: -webkit-grab;width:100%">
		<div class="swiper-wrapper"
			style=" transform: translate3d(0px, 0px, 0px); transition-duration: 0s;">
			<template v-for="(item,index) in bigCat" >
				<div class="swiper-slide" @click="gotoLink(item.url,'bigCat_'+index)">
					<img  v-bind:src="priorityImage(item.itemIcon,item.contentStill,'defaultBg_1.jpg')"  style="width:100%;">
					<div class="carousel-item" style="padding-right:20%;font-size: 1.1em;text-overflow:ellipsis; overflow:hidden;white-space:nowrap;">
						<span v-text="item.title"></span>
					</div>
				</div>
			</template>
		</div>
	</div>
	<div class="swiper-pagination row-empty">
		<template v-for="(item,index) in bigCat.resultSet" >
			<span></span>	
		</template>
	</div>
	
	<!-- 所有内容 -->
	<div class="row row-empty index-line" style="heigth:1.8em;background-color: #fff;"></div>
	<c:forEach items="${bizes}" var="biz" varStatus="i">
		<div class="row row-content" style="margin-top:5px;margin-bottom: 5px;">
		<div class="col-xs-3 row-empty">
			<c:if test="${biz.title != '本地' }">
			<a id="index_series" onclick="gotoLink('${biz.url}','biz_${i.index}');">
        		<img style=" max-width: 100%;" src="${_resourcePath}${biz.icon}">
     		</a>
     		</c:if>
     		<c:if test="${biz.title == '本地' }">
        		<img style=" max-width: 100%;" src="${_resourcePath}${biz.icon}">
     		</c:if>
		</div>
		
		<c:if test="${biz.title != '本地' }">
		<div class="col-xs-2 row-empty">
			<img class="index-arrow" src="${_templatePath}/images/index_arrow.png"/>
		</div>
		</c:if>
		
		</div>
		<div class="row row-content" style="margin-bottom:0px;">
			<epgdata:categoryItem size="3" code="${biz.categoryCode}" var="items" />
			<c:forEach var="item" items="${items}" varStatus="j">
				<epgdata:content var="content" type="${item.itemType}" code="${item.itemCode}"/>
				<c:set var="imgSrc" value="${_contextPath}/sites/weixin/images/defaultBg_2.jpg" />
				<c:if test="${not empty content.poster}">
					<c:set var="imgSrc" value="${_resourcePath}${content.poster}" />	
				</c:if>
				<c:if test="${not empty item.itemIcon}">
					<c:set var="imgSrc" value="${_resourcePath}${item.itemIcon}" />	
				</c:if>
				<div class="col-xs-4 col-content">
					<div style="overflow: hidden" id="item_${i.index}_${j.index}" onclick="gotoLink('${item.url}','item_${i.index}_${j.index}',1)">
						<img class="lazyImg content-image" src="${_contextPath}/sites/weixin/images/defaultBg_2.jpg"
							data-original="${imgSrc}"/>
					</div>
					<div class="index-text">${item.title}</div>
				</div>
			</c:forEach>	
		</div>
		<div class="row index-line-new"></div>
	</c:forEach>
	
</div>
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>
</body>

<script>
var vm = new Vue({
	el:"#app",
	data:{
		bigCat:'',
		resourcePath:'${_resourcePath}',
		contextPath:'${_contextPath}'
	},
    mounted: function () {
		this.$nextTick(function () {
			// 保证 this.$el 已经插入文档
			this.getBigCat();
			//this.getCategoryCount();
			setTimeout(function(){
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
				   	autoplay:3000,
				   	autoplayDisableOnInteraction : false});
				$(document).ready(function(){
					$(".lazyImg").lazyload({ 
				        placeholder : "images/暂无图片.jpg", 
				        effect : "fadeIn" 
			   			}); 
				});
			},500);
	 	});
		
    },
	methods:{
		getBigCat:function(){
			$.ajax({
				method:"get",
				url:"${_contextPath}/api/categoryitem/${_templateParams['big_cat']}.json?size=999&bizCode=${_context.bizCode}&siteCode=${_context.siteCode}",
				async:false,
				success:function(data){
					/* console.log("bigCat:");
					console.log(data); */
					vm.bigCat = data.resultSet;
					if(data.resultSet == null){
						vm.bigCat = [];
					}
				}
			});
		},
		gotoLink:gotoLink,
		strExist:strExist,
		priorityImage:priorityImage
	}
});
function init(){
}
</script>
</html>